new Swiper(".swiper-container", {
  loop: true,
  initialSlide: 0,
  autoplay: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true, //点击小原点切换图片
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});
// tab切换
$('.menus ul li').on('click',function(){
  console.log($(this).index())
  $('.menus ul li').removeClass('active1')
  $(this).addClass('active1')
})

// 首页接口
function getData() {
  $.ajax({
    type: "get",
    url: "http://www.xiongmaoyouxuan.com/api/tab/1?start=0",
    data: {},
    headers: { "x-platform": "pc" },
    success: function (list) {
      if (list.code == 200) {
        console.log("list", list);
        let data = list.data.items.list;
        let arr = list.data.banners;
        console.log("hhhh", data, arr);
        showList(data);
        banner(arr);
        console.log(arr.length);
      }
    },
  });
}
getData();
// 首页轮播
function banner(arr) {
  let list = [
    { url: "../lib/img/微信图片_20211014154705.png" },
    { url: "../lib/img/banner.jpeg" },
  ];
  let str = "";
  if (arr.length == 0) {
    list.forEach((item) => {
      str += ` <div class="swiper-slide"><img src="${item.url}" alt=""></div> 
`;
    });
  } else {
    arr.forEach((item) => {
      str += `
     <div class="swiper-slide"><img src="${item.imageUrl}" alt=""></div>
     `;
    });
  }
  $(".swiper-wrapper").html(str);
}
// 商品渲染界面
let datalist = []; //定义数组为空
function showList(data) {
  datalist = [...datalist, ...data];
  console.log("datalist", datalist);
  let num = datalist.length % 4;
  console.log("num", num);
  if (num !== 0) {
    datalist.splice(datalist.length - num, num);
  }
  let str = "";
  datalist.forEach((item) => {
    // console.log("item", item.id);
    str += `
 <li class="LI" onclick="changeHtml(${item.id})" >
 <img src="${item.image}" class="Img" alt="">
 <div class="ul-bottom">
     <div class="ul-bottom-F">${item.title}</div>
     <div class="ul-bottom-T">
         <span class="T-tao">淘宝</span>
         <span class="T-bao">包邮</span>
     </div>
     <div class="ul-bottom-TH">
         <div class="price"> <span class="span-M">￥</span> <span class="bigspan  span-M">${Math.floor(
           item.price
         )}</span>
             <span class="span-M"  >
             .${
               typeof (item.price, item.price.toString().split(".")[1]) ==
               typeof "string"
                 ? (item.price, item.price.toString().split(".")[1])
                 : " "
             }
             </span>
             <span class="colorspan">${item.saleNum}人已买</span>
             <span class="juanspan  right">${item.couponValue}</span>
         </div>
     </div>
 </div>
</li>
 `;
  });
  $(".container-ul").html(str);
  // $(".container-ul").append(str);
}
// 点击商品景区详情页
function changeHtml(id) {
  console.log(id);
  $.ajax({
    type: "get",
    url: "http://www.xiongmaoyouxuan.com/api/detail?id",
    data: { id },
    headers: { "x-platform": "pc" },
    success: function (list) {
      let data = list.data.detail;
      console.log("data", data);
      localStorage.setItem('detail',JSON.stringify(data))
      location.href='../pages/detail.html'
    },
  });

}
// 点击按钮，返回顶部
window.onscroll = function () {
  scrollFunction();
};
// 判断滚动条位置
function scrollFunction() {
  if (
    document.body.scrollTop > 110 ||
    document.documentElement.scrollTop > 110
  ) {
    document.querySelector(".back-top").style.display = "block";
  } else {
    document.querySelector(".back-top").style.display = "none";
  }
}
// 回到顶部
function topFunction() {
  setTimeout(function () {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  }, 100);
}
// 加载商品列表数
function loadProduct(pageNo) {
  $.ajax({
    type: "get",
    url: "http://www.xiongmaoyouxuan.com/api/tab/1/feeds",
    data: {
      start: pageNo * 20, //开始页号
    },
    headers: { "x-platform": "pc" },
    success: function (ABlist) {
      if (ABlist.code == 200) {
        console.log("listpage", ABlist);
        // 商品列表
        let data = ABlist.data.list;
        showList(data);
      }
    },
  });
}
// 点击更多  商品叠加  每页是20条 tab/1  tab/2
function loadMore() {
  let pageNo = 0; //起始页为0
  $(".more").on("click", function () {
    //调用商品列表，获取商品数据
    // 页号
    // pageNo++
    loadProduct(++pageNo);
  });
}
loadMore();

// 移入左边导航栏显示隐藏的div
$(".banner-ul li").on("mouseover", function () {
  document.querySelector(".ul-box").style.display = "block";
});
$(".banner-ul li").on("mouseout", function () {
  document.querySelector(".ul-box").style.display = "none";
});
// 调用接口,隐藏的div
//左边选项栏对应的数据
// li第一行数据渲染 上
function getULbox(num1,num2) {
  $(".li-0").on("mouseover", function () {
    // 上部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num1}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        let data = list.data.categories;
        let title=list.data.category.name;
        // console.log('datatatat',title);
        let strb=`<h3>${title}</h3> `
        // console.log('str',strb)
        $('.add-h').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
        //  console.log(strs)
         $('.add-a').html(strs)
       })
      },
    });
    // 下部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num2}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        console.log('data',list)
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h1').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a1').html(strs)
       })
      },
    });
  });
}
// li第一行数据渲染 上
getULbox('2','13')

// li第二行数据渲染 上
function getULbox2(num1,num2) {
  $(".li-1").on("mouseover", function () {
    // 上部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num1}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a').html(strs)
       })
      },
    });
    // 下部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num2}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        console.log('data',list)
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h1').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a1').html(strs)
       })
      },
    });
  });
}
// li第2行数据渲染 上
getULbox2('5','19')
// 第3行
function getULbox3(num1,num2) {
  $(".li-2").on("mouseover", function () {
    // 上部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num1}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a').html(strs)
       })
      },
    });
    // 下部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num2}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        console.log('data',list)
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h1').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a1').html(strs)
       })
      },
    });
  });
}
// li第3行数据渲染 上
getULbox3('3','15')
// 第4行
function getULbox4(num1,num2) {
  $(".li-3").on("mouseover", function () {
    // 上部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num1}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a').html(strs)
       })
      },
    });
    // 下部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num2}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        console.log('data',list)
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h1').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a1').html(strs)
       })
      },
    });
  });
}
// li第4行数据渲染 上
getULbox4('4','14')
// // 第5行
function getULbox5(num1) {
  $(".li-4").on("mouseover", function () {
    $('.add-h1').html('')
    $('.add-a1').html('')
    // 上部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num1}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a').html(strs)
       })
      },
    });
    // 下部分
  });
}
// li第5行数据渲染 上
getULbox5('10')
// // 第6行
function getULbox6(num1) {
  $(".li-5").on("mouseover", function () {
    $('.add-h1').html('')
    $('.add-a1').html('')
    // 上部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num1}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a').html(strs)
       })
      },
    });
    // 下部分
  });
}
// li第6行数据渲染 上
getULbox6('24')
// // 第7行
function getULbox7(num1,num2) {
  $(".li-6").on("mouseover", function () {
    // 上部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num1}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a').html(strs)
       })
      },
    });
    // 下部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num2}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        console.log('data',list)
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h1').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a1').html(strs)
       })
      },
    });
  });
}
// li第7行数据渲染 上
getULbox7('6','12')
// // 第8行
function getULbox8(num1) {
  $(".li-7").on("mouseover", function () {
    $('.add-h1').html('')
    $('.add-a1').html('')
    // 上部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num1}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a').html(strs)
       })
      },
    });
    // 下部分
  });
}
// li第8行数据渲染 上
getULbox8('16')
// // 第7行
function getULbox9(num1,num2) {
  $(".li-8").on("mouseover", function () {
    // 上部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num1}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a').html(strs)
       })
      },
    });
    // 下部分
    $.ajax({
      type: "get",
      url: `http://www.xiongmaoyouxuan.com/api/tab/${num2}?start=0`,
      data: {},
      headers: { "x-platform": "pc" },
      success: function (list) {
        console.log('data',list)
        let data = list.data.categories;
        let title=list.data.category.name;
        let strb=`<h3>${title}</h3> `
        $('.add-h1').html(strb)
        let strs=''
        data.forEach(item=>{
         strs+=`
         <a href="">${item.title}</a>
         `
         $('.add-a1').html(strs)
       })
      },
    });
  });
}
// li第9行数据渲染 上
getULbox9('11','7')